<template>
<el-scrollbar max-height="calc(100vh - 50px)">
    <div class="container">
        <el-card class="box-card">
            <div slot="header" class="clearfix header">
                <span>🔍 基本信息</span>
            </div>
            <el-descriptions label-width="100" column="1" border>
                <el-descriptions-item label="名称">{{ formData.name }}</el-descriptions-item>
                <el-descriptions-item label="日期">{{ formData.birthday }}</el-descriptions-item>
                <el-descriptions-item label="日期类型">{{ formData.dateType === '1' ? '公历' : '农历'
                    }}</el-descriptions-item>
                <el-descriptions-item label="备注">{{ formData.remark }}</el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-card class="box-card almanac-card">
            <div slot="header" class="clearfix header">
                <span>📅 黄历信息</span>
            </div>
            <div class="almanac-info">
                <el-descriptions label-width="100" :column="1" border>
                    <el-descriptions-item label="阳历">{{ almanac.solarDate }} {{ almanac.dayOfWeek
                    }}</el-descriptions-item>
                    <el-descriptions-item label="阴历">{{ almanac.lunarDate }}</el-descriptions-item>
                    <el-descriptions-item label="季节">{{ almanac.jijie }}</el-descriptions-item>
                </el-descriptions>
                <el-divider class="divider"></el-divider>
                <el-descriptions label-width="100" :column="1" border>
                    <el-descriptions-item label="五行">{{ almanac.wuXing }}</el-descriptions-item>
                    <el-descriptions-item label="建除神">{{ almanac.zhiShen }}</el-descriptions-item>
                    <el-descriptions-item label="长生神">{{ almanac.changSheng }}</el-descriptions-item>
                    <el-descriptions-item label="串宫神">{{ almanac.chuanGong }}</el-descriptions-item>
                    <el-descriptions-item label="神煞">{{ almanac.shenSha }}</el-descriptions-item>
                </el-descriptions>
                <el-divider class="divider"></el-divider>
                <el-row>
                    <el-col>
                        <el-text tag="b" size="large" type="success">【宜】</el-text>
                        <el-tag v-for="(item, index) in almanac.yi" :key="index" type="success"
                            style="margin-right: 5px; margin-bottom: 5px;">
                            {{ item }}
                        </el-tag>

                    </el-col>
                    <el-col>
                        <el-text tag="b" size="large" type="danger">【忌】</el-text>
                        <el-tag v-for="(item, index) in almanac.ji" :key="index" type="danger"
                            style="margin-right: 5px; margin-bottom: 5px;">
                            {{ item }}
                        </el-tag>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
    </el-scrollbar>
</template>

<script>
import birthdayUtil from '../utils/birthdayUtil';
import { char8ex } from '@lunisolar/plugin-char8ex'
import { theGods } from '@lunisolar/plugin-thegods'
import { takeSound } from '@lunisolar/plugin-takesound'
import festivals from 'lunisolar/markers/festivals.zh-cn'

import lunisolar from 'lunisolar'
lunisolar.extend(char8ex)
lunisolar.extend(theGods)
lunisolar.extend(takeSound)
// 全局加载节日列表
lunisolar.Markers.add(festivals)

export default {
    name: 'BirthdayDetail',
    props: {
        formData: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            almanac: {}
        }
    },
    mounted() {
        this.loadAlmanac();
    },
    methods: {
        loadAlmanac() {
            let lsr = birthdayUtil.convertLunarDate(this.formData.birthday, this.formData.dateType);
            debugger
            this.almanac = {
                solarDate: lsr.format('YYYY年MM月DD日'),
                dayOfWeek: lsr.format('dddd'),
                lunarDate: lsr.format('lY年 lM(lL)lD'),
                lunarYear: lsr.format('cY cM cD cH'),
                markers: lsr.markers.list.map(v => v.name).join(','),
                wuXing: lsr.char8.year.takeSound,
                zhiShen: lsr.theGods.getDuty12God(),
                changSheng: lsr.theGods.getLife12God('day'),
                chuanGong: lsr.theGods.getBy12God('day'),
                shenSha: (lsr.theGods.query('this day gods')|| []).join(' '),
                yi: lsr.theGods.query('good act 1') || [],
                ji: lsr.theGods.query('bad act 1') || [],
                jijie: lsr.getSeason()
            };
        }

    }
}
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.box-card {
    width: 90%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 5px;
}

.header {
    font-size: 15px;
    font-weight: bold;
    color: #409EFF;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.el-form-item {
    margin-bottom: 10px;
}

.el-input {
    width: 100%;
}

:global(.el-drawer__body) {
    padding: 0 !important;
}

.divider {
    margin: 15px 0;
}

.vertical-divider {
    border-left: 1px solid #ebeef5;
    height: 100%;
    margin: 0 auto;
}

</style>